<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    /> -->
    <title>打印模板</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        /* width: 58mm; */
      }

      h3 {
        text-align: center;
      }

      .text-row {
        font-size: 12px;
        margin: 10px;
      }

      .item-box{
        font-size: 12px;
        justify-content: space-between;
        text-align: center;
      }

      .footer-info{
        font-size: 10px;
        font-weight: 600;
      }

      .footer-row {
        margin: 6px;
      }
    </style>
    <script type="text/javascript" src="vue.js"></script>
  </head>
<body>
  <div id="printOrder">
    <div class="title">
      <h3>{{title}}</h3>
      <hr>
    <hr>
    </div>
    <div class="content">
      <div class="top-box">
        <div class="text-row">点餐方式：{{orderTypeVal}}</div>
        <div class="text-row">就餐方式：{{pickTypeVal}}</div>
        <div class="text-row">点餐时间：{{orderVo.settleTime}}</div>
        <div class="text-row">流水号：{{orderVo.id}}</div>
      </div>
      <hr/>
      <hr/>
      <div class="item-box">
        <table>
          <tr>
            <th>商品</th>
            <th>数量</th>
            <th>原价</th>
            <th>实收</th>
          </tr>
          <tr v-for="(item, index) in orderVo.itemInfo" :key="item.itemName">
            <td>{{item.itemName}}</td>
            <td>{{item.piece}}</td>
            <th>￥{{item.originAmount}}</th>
            <th>￥{{item.actuallyAmount}}</th>
          </tr>
        </table>
      </div>
      <hr/>
      <hr/>
      <div class="footer-info">
        <div class="footer-row">{{shopInfo.name}}</div>
        <div class="footer-row">地址：{{shopInfo.address}}</div>
        <div class="footer-row">联系电话：{{shopInfo.telPhone}}</div>
        <div class="footer-row" v-for="(item, index) in businessTitle" :key="item">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  var printOrder = new Vue({
    el: '#printOrder',
    data:{
      title: '糊涂点餐',
      shopInfo: {
        name: '糊涂餐馆（上海齐河路）',
        address: '上海市齐河路68号1单元',
        telPhone: 13923032139
      },
      orderVo:{
        orderType: 1,
        pickType: 0,
        itemInfo:[{
          itemName: '拿铁',
          piece: 1,
          originAmount: '23.30',
          actuallyAmount: '20.00'
        }],
        settleTime: '2024/12/05 22:33:00',
        id: '20241205223300'
      },
      businessTitle: [
        '新店开张，全场买3送1！！！充值满100送30,150送80，300送100，上不封顶。'
      ]
    },
    computed:{
      orderTypeVal(){
        var val = ''
        if(this.orderVo.orderType){
          val = this.orderVo.orderType === 0 ? '线上点餐': '到店点餐'
        }
        return val
      },
      pickTypeVal(){
        var val = ''
        if(this.orderVo.pickType){
          val = this.orderVo.pickType === 0 ? '堂食': '外带'
        }
        return val
      }
    }
  })
    
</script>
</html>